<template>
	<view class="container">
		<view class="blue-box">
			<view class="swiper-container">
				<swiper circular="true" autoplay="true" interval="5000" class="swiper-wrapper" indicator-dots="true">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<image src="https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" class="swiper-image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>

		</view>

		<view class="white-box1">
			<!-- 白色框 -->
			<!-- 添加标题栏 -->
			<view class="grid-title">校园生活</view>
			<view class="grid-container">
				<view class="grid-item" v-for="(item, index) in gridList" :key="index" @click="handleItemClick(item)">
					<image :src="item.icon" class="grid-icon"
						:style="{ backgroundColor: item.backgroundColor,boxShadow:item.backgroundColor+' 0 0 10px'}">
					</image>
					<text class="grid-text">{{ item.text }}</text>
				</view>
			</view>
		</view>
		<!-- <view class="white-box2" @click="gotoPage"> -->
		<!-- 白色框 -->
		<!-- 添加标题栏 -->
		<!-- <view class="grid-title">校园服务</view> -->
		<!-- <view class="grid-add"> -->
		<!-- 更多 -->
		<!-- </view> -->
		<!-- </view> -->

		<!-- <view class="white-box3">
			<view class="left">
				<image src="/static//贴2.png" mode="aspectFill" class="left-image"></image>
			</view>
			<view class="right">
				<view class="title">手机贴膜</view>
				<view class="info1">移动营业厅 9:00-21:00</view>
				<view class="info2">专业贴膜</view>
				<view class="info3">立即预约</view>
			</view>
		</view>

		<view class="white-box4">
			<view class="left">
				<image src="/static//贴2.png" mode="aspectFill" class="left-image"></image>
			</view>
			<view class="right">
				<view class="title">电脑维修</view>
				<view class="info1">移动营业厅 9:00-21:00</view>
				<view class="info2">专业维修</view>
				<view class="info3">立即预约</view>
			</view>
		</view> -->
	</view>



</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
						"image": "http://braincognitiontec.top:30003/static-file/get-img?fileName=Banner3.png",
						"isActive": false
					},
					{
						"image": "http://braincognitiontec.top:30003/static-file/get-img?fileName=Banner2.png",
						"isActive": false
					},
					{
						"image": "http://braincognitiontec.top:30003/static-file/get-img?fileName=Banner1.png",
						"isActive": false
					}
				], // 轮播图数据源
				gridList: [ // 圆形图标数据源
					{
						icon: '/static/images/我要报修.png',
						text: '我要报修',
						backgroundColor: "#4bd09f" // 添加的新属性
					},
					{
						icon: '/static/images/我的订单.png',
						text: '我的订单',
						backgroundColor: "#49c8d1"
					}
					// {
					// 	icon: '/static/images/我要预约.png',
					// 	text: '我要预约',
					// 	backgroundColor: "#5251d0"
					// },
				],
			};
		},
		methods: {
			handleItemClick(item) {
				// console.log(item)
				switch (item.text) {
					case '我要报修':
						uni.redirectTo({
							url: '/pages/submit-form/submit-form',
							fail(error) {
								console.log(error)
							}
						})
						break;
					case '我的订单':
						uni.redirectTo({
							url: '/pages/order/order',
							fail(error) {
								console.log(error)
							}
						})

						break;
					case '我要预约':
						uni.redirectTo({
							url: '/pages/order/order',
							fail(error) {
								console.log(error)
							}
						})
						break;
				}
			},

			gotoPage() {
				// 这里可以使用 uni.navigateTo 或者 uni.redirectTo 等页面跳转 API
				uni.navigateTo({
					url: '/pages/campus_service/campus_service'
				})
			}
		},
		created() {
			// 发送轮播图数据请求
			uni.request({
				url: 'https://www.example.com/api/swiper',
				success: (res) => {
					this.swiperList = res.data.data;
				},
			});
		},
	};
</script>


<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height: 100vh;
		/* 设置容器高度为100%视窗高度 */
		overflow: auto;
		/* 设置滚动条 */

	}

	.blue-box {
		position: relative;
		width: 100%;
		height: 250px;
		background-image: linear-gradient(to bottom, #009EFF, #0065F3);
		border-radius: 10rpx 10rpx 40rpx 40rpx;
	}

	.swiper-container {
		position: absolute;
		top: 10px;
		left: 50%;
		transform: translate(-50%);
		/* 添加 */
		width: 90%;
		height: 150px;
		border-radius: 30rpx;

	}

	.swiper-image {
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
	}

	.image-container {
		width: 100%;
		height: 100%;
		padding-bottom: 56.25%;
		position: relative;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.white-box1 {
		/* 添加 */
		margin-top: -80px;
		z-index: 1;
		width: 93%;
		background-color: white;
		border-radius: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.white-box2 {
		/* 添加 */
		position: absolute;
		top: 190rpx;
		z-index: 1;
		width: 90%;
		margin-top: 60%;
		background-color: white;
		border-radius: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.white-box3 {
		position: absolute;
		top: 190rpx;
		z-index: 1;
		width: 90%;
		height: calc(100vh / 6);
		margin-top: 80%;
		background-color: white;
		border-radius: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
	}

	.white-box4 {
		/* 添加 */
		position: absolute;
		top: 240rpx;
		z-index: 1;
		width: 90%;
		height: calc(100vh / 6);
		margin-top: 105%;
		background-color: white;
		border-radius: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.left {
		position: absolute;
		top: 10%;
		left: 20rpx;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.left-image {
		width: 170rpx;
		height: 170rpx;
		border-radius: 30rpx;

	}

	.right {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 10px;
	}

	.title {
		position: absolute;
		top: 20rpx;
		left: 33%;
		font-size: 32rpx;
		font-weight: bold;
	}

	.info1 {
		position: absolute;
		top: 45rpx;
		left: 32%;
		font-size: 25rpx;
		color: #848484;
		padding: 12rpx;
		margin-top: 5px;
	}

	.info2 {
		position: absolute;
		top: 80rpx;
		left: 31%;
		font-size: 28rpx;
		font-weight: 300;
		font-family: "黑体", sans-serif;
		color: #000;
		padding: 20rpx;
		margin-top: 5px;
	}

	.info3 {
		position: absolute;
		bottom: 0;
		right: 4%;
		font-size: 30rpx;
		font-weight: bold;
		font-family: "黑体", sans-serif;
		color: #0b6dff;
		padding: 20rpx;

	}

	.grid-title {
		position: absolute;
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		padding: 25rpx 35rpx;
	}

	.grid-add {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 25rpx;
		font-weight: normal;
		color: #848484;
		padding: 22px;
	}

	.grid-wrapper {
		border-radius: 10px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	}

	.grid-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		margin-top: 32rpx;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin: 58rpx;
		border-radius: 100%;
	}

	/* 	.grid-item image {
		border-radius: 30%;
		padding: 15rpx;
	} */

	.grid-icon {
		width: 60rpx;
		height: 60rpx;
		padding: 12px;
		border-radius: 50%;
		box-shadow: #0065F3 0 0 0px;

	}

	.grid-text {
		margin-top: 15rpx;
		font-size: 25rpx;
		/* 		font-weight: 600; */
	}
</style>